<template>
  <div class="basic-from">
    <div class="setting-box">
      <div class="resource-manage">
        <div class="card-box">
          <div class="card-title">基本信息</div>
          <el-form ref="doc-setting" class="form-wrap" size="small" :rules="formSettingRules" :model="projectDocForm.milestoneTemplate">
            <el-form-item label="模板名称" prop="archivesName">
              <el-input v-halfCharCode placeholder="请输入" maxlength="30" v-model="projectDocForm.milestoneTemplate.archivesName" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-halfCharCode placeholder="请输入" maxlength="50" v-model="projectDocForm.milestoneTemplate.remarks" />
            </el-form-item>
          </el-form>
        </div>
        <div class="card-box">
          <div class="card-title">
            里程碑信息
            <el-button type="primary" plain class="setting-button" @click="superInforAdd">添加</el-button>
          </div>
          <div class="table-setting">
            <el-tabs type="card" closable @tab-remove="removeTab" v-model="editableTabsValue">
              <el-tab-pane v-for="(item, index) in projectDocForm.milestoneConfigVoList" :key="item.name" :label="item.title" :name="item.name">
                <div class="table-setting">
                  <el-button type="primary" class="setting-button" @click="milestoneDetailsAdd(index)">添加</el-button>
                  <el-table :data="item.content" style="width: 100%;">
                    <el-table-column prop="materialName" label="材料名称">
                      <template slot-scope="scope">
                        <el-input
                          v-halfCharCode
                          maxlength="30"
                          :disabled="!scope.row.newAdd"
                          v-if="isAdd || scope.row.newAdd"
                          v-model="scope.row.materialsName"
                          size="small"
                          placeholder="请输入"
                        />
                        <span v-else>{{scope.row.materialsName}}</span>
                      </template>
                    </el-table-column>
                    <!--<el-table-column prop="isReuse" label="是否复用上一级材料">
                      <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.isReuse" :disabled="index === 0">
                          <el-radio :label="'1'">是</el-radio>
                          <el-radio :label="'0'">否</el-radio>
                        </el-radio-group>
                      </template>
                    </el-table-column>
                    <el-table-column prop="Required" label="是否完成才能下一步">
                      <template slot-scope="scope">
                        <el-radio-group v-model="scope.row.isRequired">
                          <el-radio :label="'1'">是</el-radio>
                          <el-radio :label="'0'">否</el-radio>
                        </el-radio-group>
                      </template>
                    </el-table-column>-->
                    <el-table-column prop="sortNumber" label="排序号">
                      <template slot-scope="scope">
                        <span>{{scope.row.sort}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button v-if="!isAdd" @click="handleClickEdit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small" @click.native.prevent="handleClickDelete(scope.$index, item.content)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="cFormFoot">
          <el-button type="primary" plain class="setting-button" v-if="!isAdd" v-throttle="[handleUpdate]">更新</el-button>
          <el-button type="primary" class="setting-button" v-else v-throttle="[handlePreservation]">保存</el-button>
        </div>
      </div>
    </div>
    <v-dialog title="资料信息" :show.sync="dialogVisible" class="dialogForm" width="1100px">
      <div class="dialog-box">
        <el-form ref="dialog-form" class="form-wrap" :rules="bulletInformationRules" :model="bulletInformation">
          <el-form-item label="里程碑名称" prop="milepostName">
            <el-input v-halfCharCode placeholder="请输入" maxlength="50" v-model="bulletInformation.milepostName" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-halfCharCode placeholder="请输入" maxlength="50" v-model="bulletInformation.remarks" />
          </el-form-item>
          <el-form-item label="排序号">
            <el-input v-halfCharCode placeholder="请输入" v-model="bulletInformation.sortNumber" disabled />
          </el-form-item>
        </el-form>
      </div>
      <span slot="foot">
        <el-button class="dialog-button-left" type="primary" @click="handleDialogClick">确定</el-button>
        <el-button class="dialog-button-right" @click="dialogVisible = false">取消</el-button>
      </span>
    </v-dialog>
  </div>
</template>

<script src="./index.js">

</script>

<style scoped lang="scss">
.setting-box {
  .resource-manage {
    .card-box {
      margin: 24px;
      overflow: hidden;
      /deep/.el-table__header {
        max-width: 100% !important;
      }
      /deep/.el-table__body {
        max-width: 100% !important;
      }
      .setting-button {
        margin: 10px;
        float: right;
      }
      .table-setting {
        min-height: 200px;
      }
      /deep/ .el-table__empty-block {
        width: 100% !important;
      }
      /deep/ .el-table__empty-text {
        margin-left: auto;
        width: 100%;
      }
    }
    .card-box:last-of-type {
      margin: 20px 0 0;
      padding-right: 20px;
    }
  }
}
.dialogForm {
  position: relative;
  /deep/ .el-dialog__body {
    min-height: 400px;
    padding: 0;
  }
  .dialog-box {
    padding: 16px 32px;
  }
}
</style>
